<template>
  <!-- 操作提示 -->
  <div id="tips" @click="close" v-if="isShow">
    <!-- 旋转 -->
    <div class="rotate">
      <!-- 旋转手势图 -->
      <div class="rotateImage"></div>
      <!-- 旋转btn -->
      <div class="Btn">旋转</div>
      <div class="Span"><span>单指滑动，旋转商品</span></div>
    </div>
    <!-- 缩放 -->
    <div class="zoom">
      <!-- 旋转手势图 -->
      <div class="zoomImage"></div>
      <!-- 旋转btn -->
      <div class="Btn">缩放</div>
      <div class="Span"><span>双指滑动，缩放商品</span></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "tips",
  data() {
    return {
      isShow: true,
    };
  },
  methods: {
    // 隐藏组件
    close() {
      // console.log("关闭");
      this.isShow = false;
    },
  },
};
</script>

<style lang="less" scoped>
#tips {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1004;
}
.rotate {
  width: 30%;
  height: 120px;
  // background-color: rosybrown;
  position: absolute;
  left: 14%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
}
.rotateImage {
  width: 2.8125rem;
  height: 3.75rem;
  background-image: url("../images/rotate.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 25%;
  // transform: translateX(-50%);
}
.zoomImage {
  width: 3.8875rem;
  height: 3.75rem;
  background-image: url("../images/zoom.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 35%;
  // transform: translateX(-50%);
}
.Btn {
  width: 2.8125rem;
  height: 1.25rem;
  // background-color: white;
  position: absolute;
  color: white;
  // left: 50%;
  // transform: translateX(-50%);
  top: 4.0625rem;
  border-radius: 1.25rem;
  // right: 0;
  text-align: center;
  font-size: 1rem;
  // left: 40%;
}
.Span {
  width: 8.75rem;
  font-size: .875rem;
  color: white;
  text-align: center;
  position: absolute;
  top: 5.625rem;
}

.zoom {
  width: 30%;
  height: 120px;
  // background-color: rosybrown;
  position: absolute;
  right: 14%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
}
</style>